<template>
    <div>
        <div class="left">
            <div class="breadcrumb-box help-bar">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="list">
                <ul>
                    <li :class="[activeIndex==index?'active':'']" v-for="(item,index) in helpList" :key="index"
                        @click="getClassDetail(item,index)">{{item.title}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import {helpHome, helpInfo} from "@api/user";

    export default {
        name: "leftHelpBar",
        props: ["active"],
        data() {
            return {
                helpList: '',
                activeIndex: '',
            };
        },
        methods: {
            getClassDetail(item, index) {
                if (this.activeIndex != index) {
                    this.activeIndex = index
                }
                this.$emit('getIssue', item.id)
                this.showIssueList = true
            },
            getHelpList() {
                helpHome().then(
                    res => {
                        this.helpList = res.data.category
                    },
                    error => {
                        this.$dialog.message(error.msg);
                    },
                );
            },
        },
        watch:{
            $route(n) {
                this.activeIndex =  this.$route.query.index
                this.showIssueList = true
                this.getHelpList()
            }
        },
        mounted() {
            this.getHelpList()
            this.activeIndex = this.$route.query.index
        }
    };
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
    $color: #DA213D;
    .left {
        .crumbs {
            display: flex;
            margin: 72px 0 24px 0;
            font-size: 14px;
            font-family: MicrosoftYaHei;

            > div:nth-of-type(1) {
                color: #999999;
            }

            > div:nth-of-type(2) {
                color: #333333;
            }
        }

        .list {
            width: 160px;
            height: 400px;
            background: #f3f3f3;
            display: flex;
            justify-content: center;

            ul {
                display: flex;
                flex-direction: column;
                width: 490px;
                justify-content: flex-start;
                align-items: center;
                background: #f3f3f3;
                padding: 0;
                margin-top: 0;

                li {
                    list-style-type: none;
                    font-size: 15px;
                    margin-bottom: 24px;
                    cursor: pointer;
                    background: #f3f3f3;
                    color: #666666;
                }

                > li:nth-of-type(1) {
                    margin-top: 32px;
                }

                .active {
                    color: $color;
                    font-weight: 600;
                }
            }
        }
    }

    .help-bar {
        width: auto !important;
    }
</style>
